<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit">
            <!--事件-->
            <el-row>
                <el-col :span="8">
                    <el-form-item :label="$t('minor.course.beginCollege')">
                        <DictSelect
                            filterable
                            v-model="queryParams.beginCollege"
                            :data="options.college"
                            style="width:80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <DictSelect
                            v-model="queryParams.trainingLevel"
                            :data="options.trainingLevel"
                            style="width:80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col> -->
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="first_title">{{$t('minor.course.courseListTitle')}}</div>
            <div class="btn">
                <div style="float:left;">
                    <el-input
                        :placeholder="$t('minor.course.inputPlaceholder')"
                        prefix-icon="el-icon-search"
                        v-model="queryParams.courseCodeAndName"
                        style="width:240px;"
                        @change="search"
                        @keyup.enter.native="search"
                    ></el-input>
                </div>
                <el-button @click="exportExcel">{{$t('minor.course.exportBtn')}}</el-button>
                <!-- <el-button @click="exportFile" type="primary">导入课程</el-button> -->
                <div class="float-right" style="margin: 0 8px;">
                    <el-dropdown
                        trigger="click"
                        @command="handleImportCommand"
                    >
                        <el-button>
                            导入
                            <i class="el-icon-arrow-down el-icon--right" size='medium'></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="import">导入</el-dropdown-item>
                            <el-dropdown-item command="download">下载模板</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-upload
                        action="/api/cultureservice/minorCourse/importCourse"
                        style="display: none;"
                        ref="upload"
                        :file-list="fileList"
                        :on-success="handlerSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-error="handlerError"
                        accept=".xlsx"
                        :auto-upload="true"
                        :show-file-list="false"
                    >
                    <span slot="trigger" ref="importBtn">导入</span>
                    </el-upload>
                </div>
                <el-button type="primary" @click="addCourseInfo">{{$t('minor.course.addBtn')}}</el-button>
            </div>
            <EduTable
                :selection="true"
                @page-change="pageChange"
                :data="tableData.list"
                :total="tableData.total_"
                @selection-change="handleSelectionChange"
            >
                <edu-table-column :label="$t('course.college')">
                    <template slot-scope="scope">{{scope.row.collegeName}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('minor.course.courseCode')">
                    <template slot-scope="scope">{{scope.row.courseCode}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('minor.course.nameCn')">
                    <template slot-scope="scope">{{scope.row.courseNameCn}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('minor.course.credit')">
                    <template slot-scope="scope">{{scope.row.credits}}</template>
                </edu-table-column>
                <edu-table-column label="总学时">
                    <template slot-scope="scope">{{scope.row.period}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('minor.course.weeks')">
                    <template slot-scope="scope">{{scope.row.weeks}}</template>
                </edu-table-column>
                <edu-table-column :label="$t('minor.course.weekSchoolHour')">
                    <template slot-scope="scope">{{scope.row.weekSchoolHour}}</template>
                </edu-table-column>
                <el-table-column :label="$t('message.operating')">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="viewRecord(scope.row)"
                            size="mini"
                        >{{$t('minor.course.viewBtn')}}</el-button>
                        <el-button
                            type="text"
                            @click="editlRecord(scope.row)"
                            size="mini"
                        >{{$t('minor.course.editBtn')}}</el-button>
                        <el-button
                            type="text"
                            @click="deleteRecord(scope.row)"
                            size="mini"
                        >{{$t('minor.course.deleteBtn')}}</el-button>
                    </template>
                </el-table-column>
            </EduTable>
            <edu-dialog
                :title="dialogTitle"
                width="60%"
                ref="addDialog"
                @close='cancelCourseForm'
                :close-on-click-modal="false"
                :append-to-body="true"
            >
                <el-form
                    :model="createCourseForm"
                    ref="createCourseForm"
                    label-width="100px"
                    :rules="courseRules"
                >
                    <el-row>
                        <el-col :span="10">
                            <el-form-item :label="$t('course.college')" prop="beginCollege">
                                <el-select
                                    filterable
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.beginCollege"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in options.college"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" offset="2">
                            <!-- <el-form-item :label="$t('label.trainingLevel')" prop="trainingLevel">
                                <el-select
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.trainingLevel"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in options.trainingLevel"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item :label="$t('minor.course.courseCode')" prop="courseCode">
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.courseCode"
                                    ref="courseCode"
                                    style="width: 63%;"
                                ></el-input>
                                <el-button
                                    :disabled="isUpdate"
                                    type="primary"
                                    @click="autoCode"
                                    style="max-width: 35%;float: right;"
                                >{{$t("course.autoAllocation")}}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="10">
                            <el-form-item :label="$t('minor.course.courseCode')" prop="courseCode">
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.courseCode"
                                    ref="courseCode"
                                    style="width: 63%;"
                                ></el-input>
                                <el-button
                                    :disabled="isUpdate"
                                    type="primary"
                                    @click="autoCode"
                                    style="max-width: 35%;float: right;"
                                >{{$t("course.autoAllocation")}}</el-button>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="10">
                            <el-form-item :label="$t('minor.course.nameCn')" prop="courseNameCn">
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.courseNameCn"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" offset="2">
                            <el-form-item :label="$t('minor.course.nameEn')" prop="courseNameEn">
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.courseNameEn"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="10">
                            <el-form-item :label="$t('minor.course.nameEn')" prop="courseNameEn">
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.courseNameEn"
                                ></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="10">
                            <el-form-item :label="$t('minor.course.credit')" prop="credit">
                                <el-input :disabled="isUpdate" v-model="createCourseForm.credit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" offset="2">
                            <el-form-item
                                :label="$t('minor.course.weekSchoolHour')"
                                prop="weekSchoolHour"
                            >
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.weekSchoolHour"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row> -->
                        <!-- <el-col :span="10">
                            <el-form-item :label="$t('minor.course.isElective')" prop="isElective">
                                <el-select
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.isElective"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in options.isElective"
                                        :key="item.value"
                                        :value="item.value"
                                        :label="item.label"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <!-- <el-col :span="10" offset="2">
                            <el-form-item
                                :label="$t('minor.course.weekSchoolHour')"
                                prop="weekSchoolHour"
                            >
                                <el-input
                                    :disabled="isUpdate"
                                    v-model="createCourseForm.weekSchoolHour"
                                ></el-input>
                            </el-form-item>
                        </el-col> -->
                    <!-- </el-row> -->
                    <el-row>
                        <el-col :span="10">
                            <el-form-item :label="$t('minor.course.weeks')" prop="weeks">
                                <el-input :disabled="isUpdate" v-model="createCourseForm.weeks"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" offset="2">
                            <el-form-item label="总学时" prop="period">
                                <el-input disabled v-model="totalPerid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="buttons">
                    <el-button
                        @click="cancelCourseForm"
                        v-if="optionType== 0 || optionType== 1"
                    >{{$t('message.cancel')}}</el-button>
                    <el-button
                        type="primary"
                        @click="submitCourseForm"
                        v-if="optionType== 0 || optionType== 1"
                    >{{$t('minor.course.confirmBtn')}}</el-button>
                    <el-button
                        type="primary"
                        @click="cancelCourseForm"
                        v-if="optionType== 2"
                    >{{$t('minor.course.returnBtn')}}</el-button>
                </span>
            </edu-dialog>
            <!--导入弹框-->
            <!-- <edu-dialog ref="uploadDialog"
                        title="导入课程"
                        :confirmBtnText="$t('common.btn.confirm')"
                        size="small"
                        @close="clearFiles"
                        @confirm="uploadFile">
                <el-form label-width="85px">
                    <el-row>
                        <el-form-item>
                        <el-upload ref="upload"
                                    :data="{}"
                                    :on-success="uploadDone"
                                    :auto-upload="false"
                                    :multiple="false"
                                    :on-change="(file, fileList)=>{ this.fileList = fileList}"
                                    :limit="1"
                                    :accept="'.xlsx'"
                                    :action="importUrl">
                            <el-button slot="trigger"
                                    size="small"
                                    type="primary">{{ $t('label.selectFile') }}
                            </el-button>
                            <div slot="tip"
                                class="el-upload__tip">{{ $t('courseTake.uploadXLSFileOnly') }}
                            </div>
                        </el-upload>
                        </el-form-item>
                    </el-row>
                </el-form>
            </edu-dialog> -->
        </el-card>
    </div>
</template>

<script>
import ManArrangeApi from "common/src/api/course/manArranget";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { getValue } from "common/src/api/commonParam";
import { getCollegeids } from "common/src/api/courseTemplate";
import CourseApi from "common/src/api/minor/minorCourseManager";
import {
    queryCourseList,
    addCourse,
    updateCourse,
    deleteCourse,
    queryCourseInfo,
    downloadTemplate,
    exportCourseList,
    autoCode
} from "common/src/api/minor/minorCourseManager";
export default {
    data() {
        return {
            value1: "",
            courseDialog: false,
            dialogTiltle: false,
            dialogTitle: "",
            managerDeptId: 1,
            optionType: 0, //操作类型：0：新增 1：编辑 2：查看
            courseId: 0,
            isUpdate: false,
            createCourseForm: {
                beginCollege: "",
                //trainingLevel: "",
                courseCode: "",
                courseNameCn: "",
                courseNameEn: "",
                credit: "",
                //isElective: "1",
                weekSchoolHour: "",
                weeks: "",
                period: ""
            },
            importUrl: '',
            tableData: { list: [], total_: 0 },
            options: {
                trainingLevel: [],
                isElective: [{ value: "1", label: "是" }],
                college: []
            },
            queryParams: {
                beginCollege: "",
                trainingLevel: "",
                courseCode: "",
                courseName: "",
                courseCodeAndName: ""
            },
            autoCodeInfo: {
                //trainingLevel: "",
                collegeId: "",
                managerDeptId: ""
            },
            page: {
                pageNum: 1,
                pageSize: 20
            },
            courseRules: {
                beginCollege: [
                    {
                        required: true,
                        message: this.$t("course.selectCollege"),
                        trigger: "blur"
                    }
                ],
                trainingLevel: [
                    {
                        required: true,
                        message: this.$t("course.selectTrainingLevel"),
                        trigger: "blur"
                    }
                ],
                courseCode: [
                    {
                        required: true,
                        message: this.$t("course.autoAllocation"),
                        trigger: "blur"
                    }
                ],
                courseNameCn: [
                    {
                        required: true,
                        message: this.$t("course.inputCourseName"),
                        trigger: "blur"
                    }
                ],
                courseNameEn: [
                    {
                        trigger: "blur",
                        validator(rule, value, callback){
                            let reg = /[\u4e00-\u9fa5]/;
                            if (value && reg.test(value)) {
                                callback(new Error('不能输入中文'));
                            }else {
                                callback();
                            }
                        }
                    }
                ],
                credit: [
                    {
                        required: true,
                        message: this.$t("course.inputCourseScore"),
                        trigger: "blur"
                    },
                    {
                        validator: this.doubleReg,
                        trigger: "blur"
                    },
                    {
                        validator: this.notBlank,
                        trigger: "blur"
                    }
                ],
                isElective: [
                    {
                        required: true,
                        message: this.$t("course.selectIsPublicChooseCourse"),
                        trigger: "blur"
                    }
                ],
                weekSchoolHour: [
                    {
                        required: true,
                        message: this.$t("course.inputWeekStudyTime"),
                        trigger: "blur"
                    },
                    {
                        validator: this.doubleReg,
                        trigger: "blur"
                    },
                    {
                        validator: this.notBlank,
                        trigger: "blur"
                    }
                ],
                weeks: [
                    {
                        required: true,
                        message: this.$t("course.inputWeekNum"),
                        trigger: "blur"
                    },
                    {
                        validator: this.doubleReg,
                        trigger: "blur"
                    },
                    {
                        validator: this.notBlank,
                        trigger: "blur"
                    }
                ],
                period: [
                    {
                        required: true,
                        message: this.$t("course.inputStudyTime"),
                        trigger: "blur"
                    }
                    // {
                    //     validator: this.doubleReg,
                    //     trigger: "blur"
                    // },
                    // {
                    //     validator: this.notBlank,
                    //     trigger: "blur"
                    // }
                ]
            }
        };
    },
    created() {},
    computed: {
        totalPerid() {
            let total = '';
            if (this.isUpdate) {
                total = this.createCourseForm.period;
            }else {
                if (this.createCourseForm.weekSchoolHour && this.createCourseForm.weeks) {
                    total = this.createCourseForm.weekSchoolHour * this.createCourseForm.weeks;
                }
                this.createCourseForm.period = total;
            }
            return total;
        }
    },
    mounted() {
        if (!this.$checkMinor()) return;
        this.getOptions();
        //初始化学院
        this.collegeInfo();
        //初始化查询课程列表
        this.initCourseList();
    },
    activated() {},
    methods: {
        getOptions() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            };
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        trainingLevel: "X_PYCC"
                    },
                    res.data,
                    this.options
                );
            });
        },
        collegeInfo() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                this.options.college = [];
                UTILS.fillSelect(
                    {
                        college: "X_YX"
                    },
                    res.data,
                    this.options
                );
            });
        },
        initCourseList() {
            if (!this.$checkMinor()) return;
            let params = {
                collegeId: this.queryParams.beginCollege,
                trainingLevel: this.queryParams.trainingLevel,
                keyWord: this.queryParams.courseCodeAndName,
                page: this.page.pageNum,
                pageSize: this.page.pageSize
            };
            this.queryCourseList(params);
        },
        queryCourseList(params) {
            queryCourseList(params).then(res => {
                if (res.code === 200) {
                    this.tableData.list = res.data.list;
                    this.tableData.total_ = res.data.total_;
                } else {
                    throw response.msg;
                }
            });
        },
        addCourseInfo() {
            if (!this.$checkMinor()) return;
            this.createCourseForm = {
                beginCollege: "",
                trainingLevel: "",
                courseCode: "",
                courseNameCn: "",
                courseNameEn: "",
                credit: "",
                isElective: "1",
                weekSchoolHour: "",
                weeks: "",
                period: ""
            };
            this.$refs.createCourseForm &&
                this.$refs.createCourseForm.resetFields();
            this.optionType = 0;
            this.isUpdate = false;
            this.dialogTitle = this.$t("minor.course.addCourseTitle");
            this.$refs.addDialog.open();
        },
        editlRecord(row) {
            this.createCourseForm = {
                beginCollege: "",
                trainingLevel: "",
                courseCode: "",
                courseNameCn: "",
                courseNameEn: "",
                credit: "",
                isElective: "1",
                weekSchoolHour: "",
                weeks: "",
                period: ""
            };
            this.$refs.createCourseForm &&
                this.$refs.createCourseForm.resetFields();
            this.optionType = 1;
            this.isUpdate = false;
            this.dialogTitle = this.$t("minor.course.modifyCourseTitle");
            //赋值
            this.courseId = row.id;
            this.assignmentForm(row);
            this.$refs.addDialog.open();
        },
        search() {
            this.initCourseList();
        },
        viewRecord(row) {
            this.createCourseForm = {
                beginCollege: "",
                trainingLevel: "",
                courseCode: "",
                courseNameCn: "",
                courseNameEn: "",
                credit: "",
                isElective: "1",
                weekSchoolHour: "",
                weeks: "",
                period: ""
            };
            this.$refs.createCourseForm &&
                this.$refs.createCourseForm.resetFields();
            this.optionType = 2;
            this.isUpdate = true;
            this.assignmentForm(row);
            this.dialogTitle = this.$t("minor.course.viewCourseTile");
            this.$refs.addDialog.open();
        },
        deleteRecord(row) {
            let params = {
                courseId: row.id
            };
            this.$confirm(
                this.$t("minor.course.deleteSign"),
                this.$t("message.prompt"),
                {
                    confirmButtonText: this.$t("message.confirm"),
                    cancelButtonText: this.$t("message.cancel"),
                    type: "warning"
                }
            ).then(() => {
                deleteCourse(params).then(res => {
                    if (res.code === 200) {
                        this.$refs.addDialog.close();
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        });
                        this.initCourseList();
                    }
                });
            });
        },
        assignmentForm(row) {
            this.createCourseForm.beginCollege = row.beginCollege;
            this.createCourseForm.trainingLevel = row.trainingLevel;
            this.createCourseForm.courseCode = row.courseCode;
            this.createCourseForm.courseNameCn = row.courseNameCn;
            this.createCourseForm.courseNameEn = row.courseNameEn;
            this.createCourseForm.credit = row.credits;
            this.createCourseForm.weekSchoolHour = row.weekSchoolHour;
            this.createCourseForm.weeks = row.weeks;
            this.createCourseForm.period = row.period;
        },
        cancelCourseForm() {
            this.$refs.addDialog.close();
        },
        submitCourseForm() {
            this.$refs.createCourseForm.validate(valid => {
                if (valid) {
                    //校验英文名称
                    // if (!this.checkNameEn(this.createCourseForm.courseNameEn)) {
                    //     return;
                    // }
                    let params = {
                        //trainingLevel: this.createCourseForm.trainingLevel,
                        beginCollege: this.createCourseForm.beginCollege,
                        courseCode: this.createCourseForm.courseCode,
                        courseNameCn: this.createCourseForm.courseNameCn,
                        courseNameEn: this.createCourseForm.courseNameEn,
                        credits: this.createCourseForm.credit,
                        weekSchoolHour: this.createCourseForm.weekSchoolHour,
                        //isElective: this.createCourseForm.isElective,
                        weeks: this.createCourseForm.weeks,
                        period: this.createCourseForm.period
                    };

                    if (this.optionType === 0) {
                        //新增数据提交
                        addCourse(params).then(res => {
                            if (res.code === 200) {
                                this.$refs.addDialog.close();
                                this.initCourseList();
                                this.$message({
                                    message: "新增成功",
                                    type: "success"
                                });
                            }
                        });
                    }
                    if (this.optionType === 1) {
                        //编辑数据提交
                        if (!!this.courseId) {
                            params.id = this.courseId;
                            updateCourse(params).then(res => {
                                if (res.code === 200) {
                                    this.$refs.addDialog.close();
                                    this.initCourseList();
                                    this.$message({
                                        message: "编辑成功",
                                        type: "success"
                                    });
                                }
                            });
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        doubleReg(rule, value, callback) {
            let number = new Number(value);
            if (isNaN(number)) {
                callback(new Error(this.$t("course.mustInputNumber")));
            } else {
                if (number > 9999) {
                    callback(new Error('请输入合理的数值'));
                }else {
                    callback();
                }
            }
        },
        notBlank(rule, value, callback) {
            if (value && value.toString().replace(/^\s+|\s+$/g, "") == "") {
                callback(new Error(this.$t("course.mustNotInputBlank")));
            } else {
                callback();
            }
        },
        //校验英文名称只能是字母、数字或者空格
        checkNameEn(value) {
            if (
                value &&
                value.toString().replace(/^[a-zA-Z\d\s]*$/, "") != ""
            ) {
                this.$message.error(this.$t("minor.tip.englishNameError"));
                return false;
            } else {
                return true;
            }
        },
        autoCode() {
            //let trainingLevel = this.createCourseForm.trainingLevel;
            let collegeId = this.createCourseForm.beginCollege;
            // if (!trainingLevel) {
            //     return this.$message({
            //         type: "error",
            //         message: this.$t("course.selectTrainingLevel")
            //     });
            // }
            if (!collegeId) {
                return this.$message({
                    type: "error",
                    message: this.$t("course.selectCollege")
                });
            }
            //this.autoCodeInfo.trainingLevel = trainingLevel;
            this.autoCodeInfo.managerDeptId = this.managerDeptId;
            this.autoCodeInfo.collegeId = collegeId;
            autoCode(this.autoCodeInfo).then(res => {
                if (res.code == 200) {
                    this.createCourseForm.courseCode = res.data;
                    this.$refs.courseCode.focus();
                }
            });
        },
        pageChange(page) {
            this.page.pageNum = page.pageNum;
            this.page.pageSize = page.pageSize;
            this.initCourseList();
        },
        reset() {
            this.queryParams = {
                beginCollege: "",
                trainingLevel: "",
                courseCodeAndName: ""
            };
            this.initCourseList();
        },
        onSubmit() {
            this.initCourseList();
        },
        //导出excel
        exportExcel() {
            if (!this.$checkMinor()) return;
            let idsStr = '';
            if (this.multiSelectData && this.multiSelectData.length) {
                idsStr = this.multiSelectData.map(item => item.id).join(',');
            }
            let params = {
                trainingLevel: this.queryParams.trainingLevel,
                collegeCode: this.queryParams.beginCollege,
                keyWord: this.queryParams.courseCodeAndName,
                idsStr
            };
            let url = exportCourseList(params);
            window.open(url);
        },
        exportFile() {
            this.importUrl = '';
            this.$refs.uploadDialog.open();
            //this.importUrl = 'xxx';
        },
        // 导入按钮组操作
        handleImportCommand(command) {
            if (command === "download") {
                CourseApi.downloadTemplate();
            } else if (command === "import") {
                this.$refs.importBtn.click();
            }
        },
        // 文件导入成功
        handlerSuccess(response, file, fileList) {
            let responseCode = response.code;
            if (responseCode === 200) {
                this.$message({
                    message: "上传成功！",
                    type: "success"
                });
            } else {
                this.$message({
                    message: response.msg,
                    type: "error"
                });
            }
            this.searchList();
            this.$refs.upload.clearFiles();
        },
        // 文件导入错误
        handlerError(response, file, fileList) {
            this.$message({
                message: "上传失败！",
                type: "error"
            });
            if (this.uploadType) {
                this.$refs.uploadEdit.clearFiles();
                return;
            }
            this.$refs.upload.clearFiles();
        },
        beforeAvatarUpload(file) {
            //上传附件的校验
                let requireFile = [
                    "xlsx",
                    "xls"
                ];
                const fileFormate =
                    requireFile.indexOf(
                        file.name.split(".")[file.name.split(".").length - 1]
                    ) > -1;
                if (!fileFormate) {
                    this.$message({
                        message: '只能上传xlsx类型的文件',
                        type: "warning"
                    });
                }
                if (!(fileFormate)) {
                    //先清空附件
                    return false;
                }
        },
        uploadFile() {
			if (_.isEmpty(this.fileList)) {
				this.$message({
					type: "info",
					message: this.$t("message.selectFilePlease")
				});
				return;
			}
			this.$refs.upload.submit();
        },
        // 关闭弹出框
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.$refs.uploadDialog.close();
        },
        // 导入成功
        uploadDone(res) {
            if (res.code == 200) {
                this.$message({
                    type: 'success',
                    message: this.$t('common.tips.uploadSuccess')
                });
                this.handleSearch();
            }else{
                this.$message({
                    type: 'error',
                    message: res.msg
                });
                return 
            }
            this.clearFiles();
        },
        handleSelectionChange(val) {
            this.multiSelectData = val;
        }
    }
};
</script>

<style scoped>
.first_title {
    font-size: 18px;
    font-family: "微软雅黑";
    color: #2b3b4e;
    padding: 0px 0px 16px;
}
.btn {
    text-align: right;
    padding: 0px 0px 16px;
}
</style>
